<!-- 配种 -->
<!-- 配种管理 首页-->
<template>
  <view class="box">
    <uv-navbar 
      class="bold-title" 
      title="配种" 
      @leftClick="leftClick"
      :safeAreaInsetTop="true"
      :placeholder="true"
      :height="'44px'"
    ></uv-navbar>
    
    <view class="content-area">
      <VaccineRecord :records="breedingRecords"></VaccineRecord>
    </view>
    
    <view class="header">
      <button class="add-button" @click="goToTrace">新增</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
 import VaccineRecord from '/components/Quarantinehome/Quarantinehome.vue';  // 引入子组件
import { getBreed } from '@/api/manageRight.js';
 import cowImg from '/static/map/cow.png'; // 确保路径正确
const breedingRecords = ref([]);

// 获取配种记录
const fetchBreedingRecords = async () => {
  try {
    const response = await getBreed();
    if (response.code === 200 && response.data) {
      breedingRecords.value = response.data.map(item => ({
        entries: [
          { img: cowImg, type: '公: 牲畜编号', imei: item.F_Paternal_IMEI },
          { img: cowImg, type: '母: 牲畜编号', imei: item.F_Matriarchal_IMEI }
        ],
       
        operator: item.F_UserName,
        date: new Date(item.F_CreateTime).toLocaleDateString()
      }));
    }
  } catch (error) {
    console.error('获取配种记录失败:', error);
  }
};

// 返回按钮点击事件
const leftClick = () => {
  uni.navigateBack();
};

// 前往追踪页面
const goToTrace = () => {
  uni.navigateTo({
    url:'./matingaddnr'
  });
};

// 页面加载时获取数据
onMounted(() => {
  fetchBreedingRecords();
});
</script>


<style lang="scss" scoped>
 .box {
   display: flex;
   flex-direction: column;
   height: 100vh;
 }
 
 .bold-title {
   font-weight: bold;
 }
 
 .content-area {
   background-color: #f3f5f8; // 设置背景为浅灰色
   flex: 1; // 确保内容区域占据剩余空间
   padding: 30rpx;
   overflow: auto; // 确保内容可滚动
 }
 
 .record-container {
   background-color: transparent; // 确保容器背景是透明的，以显示父组件的背景
 }
 
 .header {
   .add-button {
     background-color: #0bcb75;
     color: white;
     border: none;
     border-radius: 8rpx;
     padding: 16rpx;
     width: 100%;
     font-size: 32rpx;
     margin-top: 40rpx;
     position: fixed;
     bottom: 0;
     left: 0;
   }
 }
</style>

